<template>
  <n-modal v-model:show="showModal">
    <n-card style="width: 500px" title="选择任务模式" :bordered="false">
      <n-space vertical>
        <n-button
          type="primary"
          block
          @click="handleSelect('realtime')"
        >
          实时任务
        </n-button>
        <n-button
          type="info"
          block
          @click="handleSelect('polling')"
        >
          轮询任务
        </n-button>
      </n-space>
    </n-card>
  </n-modal>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { NModal, NCard, NButton, NSpace, useMessage } from 'naive-ui';

const message = useMessage();
const showModal = ref(false);

// 打开弹窗
function open() {
  showModal.value = true;
}

// 关闭弹窗
function close() {
  showModal.value = false;
}

// 处理选择
function handleSelect(mode: 'realtime' | 'polling') {
  message.success(`已选择：${mode === 'realtime' ? '实时任务' : '轮询任务'}`);
  close();
  // 触发外部事件
  // emit('select', mode);
}

// 暴露方法
defineExpose({ open, close });
</script>
